<script setup lang="ts">
import { computed, reactive, ref } from "vue";
import { onLoad, onReachBottom, onShow, onUnload } from "@dcloudio/uni-app";
import { usePageScroll } from "@/hooks/scroll";
import { useList } from "@/hooks/page";
import { new_guide_index_api } from "@/package/novice/api/guider_home";
import {
  new_guide_share_api,
  new_guide_share_info_api,
} from "@/package/novice/api/new_guide";
import { like_api } from "@/package/novice/api/common";
import { data_api } from "@/api/my";
import { EV_LOGIN, EV_NOTE, EV_ORDER } from "@/constant/event";
import { Account } from "@/utils/account";
import { AppData } from "@/utils/app";
import { Window } from "@/utils/window";
import { autoTask } from "@/utils/timer";
import { Date } from "@/utils/date";
import { numToHour } from "@/utils/number";
import { createWaterfall } from "@/utils/waterfall";
import { Router } from "@/utils/router";
import { Toast } from "@/utils/toast";

import NavBack from "@/components/nav/back.vue";
import NavBar from "@/components/nav/bar.vue";
import NavBg from "@/components/nav/bg.vue";
import NavSpace from "@/components/nav/space.vue";
import Swipe from "@/components/swipe/swipe.vue";
import SwipeDot from "@/components/swipe/dot.vue";
import IndexLiveItem from "@/pages/index/components/index-live-item.vue";
import IndexMenuTitle from "@/pages/index/components/index-menu-title.vue";
import IndexGuideItem from "./components/index-guide-item.vue";
import IndexMoreBtn from "@/pages/index/components/index-more-btn.vue";
import IndexLiveItem2 from "./components/index-live-item.vue";
import StudyCourseItem from "@/pages/index/components/study-course-item.vue";
import IndexTrainItem from "./components/index-train-item.vue";
import IndexJpsItem from "./components/index-jps-item.vue";
import CommunityNoteItem from "@/pages/index/components/community-note-item.vue";
import CommunityNoteLike from "@/pages/index/components/community-note-like.vue";
import ListMore from "@/components/list/more.vue";
import CommunityNoteBtn from "@/pages/index/components/community-note-btn.vue";
import PopupModal from "@/components/popup/modal.vue";
import CommunityNotePicker from "@/pages/index/components/community-note-picker.vue";

onLoad(() => {
  new_guide_index_api().then((resp) => {
    adList.value = resp.banner;
    liveList.value = resp.now_live;

    const new_guide_sachet = resp.menu_title.find(
      (i) => i.key === "new_guide_sachet"
    );
    if (new_guide_sachet) {
      guideData.title = new_guide_sachet.show_title;
      guideData.desc = new_guide_sachet.sub_title;
    }
    guideList.value = resp.new_guide_sachet;

    liveList2.value = resp.live;
    autoTaskStop = autoTask({ delay: 1000, immediate: true }, () => {
      const current = Date.getDate();
      const timestamp = current.unix();

      liveList2.value = liveList2.value.map((i) => {
        const start_time = Date.getDate(i.start_time * 1000);
        if (timestamp > i.end_time) {
          // 已结束
          i.live_state = 2;
          i.start_time_str = `${start_time.format("YYYY年M月D日 HH:mm")}`;
        } else if (timestamp < i.start_time) {
          // 未开始
          i.live_state = 0;
          const start_time_str = start_time.format(Date.ftDate);
          if (start_time_str === current.format(Date.ftDate)) {
            i.start_state = 1; // 今天
            i.start_time_arr = numToHour(i.start_time - timestamp).split(":");
          } else if (
            start_time_str === current.add(1, "day").format(Date.ftDate)
          ) {
            i.start_state = 2; // 明天
            i.start_time_str = `明天 ${start_time.format("HH:mm")}`;
          } else {
            i.start_state = 0;
            i.start_time_str = `${start_time.format("YYYY年M月D日 HH:mm")}`;
          }
        } else {
          // 直播中
          i.live_state = 1;
          i.start_time_str = `${start_time.format("YYYY年M月D日 HH:mm")}`;
        }
        return i;
      });
    });
    const select_course = resp.menu_title.find(
      (i) => i.key === "select_course"
    );
    if (select_course) {
      courseData.title = select_course.show_title;
      courseData.desc = select_course.sub_title;
    }
    courseList.value = resp.select_course;

    const offline_course = resp.menu_title.find(
      (i) => i.key === "offline_course"
    );
    if (offline_course) {
      trainData.title = offline_course.show_title;
      trainData.desc = offline_course.sub_title;
    }
    trainList.value = resp.offline_course;

    vipData.url = resp.guide_vip_ad_pic;

    const follow_study = resp.menu_title.find((i) => i.key === "follow_study");
    if (follow_study) {
      jpsData.title = follow_study.show_title;
      jpsData.desc = follow_study.sub_title;
    }
    jpsList.value = resp.follow_study;

    const new_guide_share = resp.menu_title.find(
      (i) => i.key === "new_guide_share"
    );
    if (new_guide_share) {
      noteData.title = new_guide_share.show_title;
      noteData.desc = new_guide_share.sub_title;
    }
  });

  reloadList();

  Account.isLogin && reloadMyData();
  uni.$on(EV_LOGIN, evLoginCallback);
  uni.$on(EV_ORDER, evOrderCallback);
  uni.$on(EV_NOTE, evNoteCallback);
});
onShow(() => {
  myData.isVip = AppData.userData.is_vip_member === 1;
  myData.isCertificate = AppData.userData.is_guide_certification === 1;
});
const { pageIsScroll, onPageScroll } = usePageScroll(() => {
  listLoadMore.value = listData.value.length > 1;
});
onReachBottom(() => loadMoreList());
onUnload(() => {
  autoTaskStop?.();
  uni.$off(EV_LOGIN, evLoginCallback);
  uni.$off(EV_ORDER, evOrderCallback);
  uni.$off(EV_NOTE, evNoteCallback);
});

const adIndex = ref(0);
const adList = ref<any[]>([]);
const adClick = () => {
  const ad = adList.value[adIndex.value];
  ad.url.startsWith("http")
    ? Router.navigateToWeb(ad.url, "1")
    : Router.navigateTo(ad.url);
};

const liveIndex = ref(0);
const liveList = ref<any[]>([]);
const liveClick = () => {
  const live = liveList.value[liveIndex.value];
  if (live.type === 3) {
    const fn = (isLogin: boolean) => {
      // 已购买
      if (myDataLiveList.value.includes(live.id))
        return Router.navigateToOrRedirectTo(isLogin, live.url);

      isLogin && Router.navigateBack();
      popupModal.value?.show(
        {
          content: "该课程为付费直播课，需要购买后才能观看哦，是否购买该课程？",
          confirmText: "前往购买",
        },
        () => {
          Router.navigateTo(`/package/mall/pages/live/detail?id=${live.id}`);
        }
      );
    };

    Account.isLogin
      ? fn(false)
      : Account.login(() => {
          reloadMyData().then(() => fn(true));
        });
  } else {
    Account.checkLogin((isLogin) => {
      const fn = () => {
        Router.navigateToOrRedirectTo(isLogin, live.url);
      };

      if (live.type !== 4) return fn();

      // 是 VIP
      if (AppData.userData.is_vip_member === 1) return fn();

      isLogin && Router.navigateBack();
      popupModal.value?.show(
        {
          content:
            "该课程为VIP专属直播课，需要开通导游VIP才能观看哦，是否开通？",
          confirmText: "开通导游VIP",
        },
        () => {
          Router.navigateTo("/package/mall/pages/vip/index");
        }
      );
    });
  }
};

const guideData = reactive({ title: "新手入行宝典", desc: "" });
const guideList = ref<any[]>([]);
const guideClick = (id: string) => {
  checkCertificate((isLogin) => {
    Router.navigateToOrRedirectTo(
      isLogin,
      `/package/novice/pages/guide/index?id=${id}`
    );
  });
};

const liveList2 = ref<any[]>([]);
const liveClick2 = (index: number) => {
  if (index === -1) return Router.navigateTo(`/package/mall/pages/live/list`);

  const live = liveList2.value[index];

  // 已结束、不支持回放
  if (live.live_state === 2 && live.is_can_playback !== 1) return;

  if (live.type === 3) {
    const fn = (isLogin: boolean) => {
      // 已购买
      if (myDataLiveList.value.includes(live.id))
        return live.live_state === 0
          ? Toast.show("直播未开始，请耐心等待哦~")
          : Router.navigateToOrRedirectTo(isLogin, live.url);

      isLogin && Router.navigateBack();
      popupModal.value?.show(
        {
          content: "该课程为付费直播课，需要购买后才能观看哦，是否购买该课程？",
          confirmText: "前往购买",
        },
        () => {
          Router.navigateTo(`/package/mall/pages/live/detail?id=${live.id}`);
        }
      );
    };

    Account.isLogin
      ? fn(false)
      : Account.login(() => {
          reloadMyData().then(() => fn(true));
        });
  } else {
    Account.checkLogin((isLogin) => {
      const fn = () => {
        live.live_state === 0
          ? Toast.show("直播未开始，请耐心等待哦~")
          : Router.navigateToOrRedirectTo(isLogin, live.url);
      };

      if (live.type !== 4) return fn();

      // 是 VIP
      if (AppData.userData.is_vip_member === 1) return fn();

      isLogin && Router.navigateBack();
      popupModal.value?.show(
        {
          content:
            "该课程为VIP专属直播课，需要开通导游VIP才能观看哦，是否开通？",
          confirmText: "开通导游VIP",
        },
        () => {
          Router.navigateTo("/package/mall/pages/vip/index");
        }
      );
    });
  }
};

const courseData = reactive({ title: "线上精品课", desc: "" });
const courseList = ref<any[]>([]);
const courseClick = (index: number) => {
  checkCertificate((isLogin) => {
    if (index === -1)
      return Router.navigateToOrRedirectTo(
        isLogin,
        `/package/study/pages/course/list`
      );

    const course = courseList.value[index];
    Router.navigateToOrRedirectTo(
      isLogin,
      `/package/study/pages/course/detail?id=${course.id}`
    );
  });
};

const trainData = reactive({ title: "线下培训", desc: "" });
const trainList = ref<any[]>([]);
const trainClick = (id: string) => {
  id
    ? Router.navigateTo(`/package/mall/pages/train/detail?id=${id}`)
    : Router.navigateTo(`/package/mall/pages/train/list`);
};

const vipData = reactive({ url: "" });
const vipClick = () => {
  Router.navigateTo("/package/mall/pages/vip/index");
};

const jpsData = reactive({ title: "跟团实习", desc: "" });
const jpsList = ref<any[]>([]);
const jpsClick = (id: string) => {
  checkCertificate((isLogin) => {
    if (id) {
      isLogin && Router.navigateBack();
      // Router.navigateTo(`/package/mall/pages/jps/detail?id=${id}`);
      Router.navigateToMiniProgram(
        "wx5214fcfbdf6da440",
        `/package/product/pages/detail/detail2?id=${id}`
      );
    } else {
      Router.navigateToOrRedirectTo(isLogin, `/package/mall/pages/jps/list`);
    }
  });
};

const noteData = reactive({ title: "新人分享", desc: "" });
const noteList = computed(() => {
  return createWaterfall(
    listData.value.map((i) => {
      if (i.type === 3) {
        Object.assign(i, { width: 200, height: 290 });
      }
      return i;
    }),
    {
      baseWidth: Window.rpxToPx(336),
      columnHeight: [0, 0],
    }
  );
});
const noteClick = (index: number, index2: number) => {
  if (index === -1) {
    checkCertificate((isLogin) => {
      isLogin && Router.navigateBack();
      communityNotePicker.value?.show((type, filePath) => {
        Router.navigateTo(
          `/package/novice/pages/note/edit?${Router.dataToQuery({
            type,
            filePath,
          })}`
        );
      });
    });
  } else {
    const note = noteList.value.columnData[index][index2] as any;
    Router.navigateTo(
      note.type === 2
        ? `/package/novice/pages/note/detail2?id=${note.id}`
        : `/package/novice/pages/note/detail?id=${note.id}`
    );
  }
};

const { listData, listStatus, listLoadMore, reloadList, loadMoreList } =
  useList({ page: 1, page_size: 10 }, (query) => {
    return new_guide_share_api(query);
  });

const checkCertificate = (callback: (isLogin: boolean) => void) => {
  Account.checkLogin((isLogin) => {
    // 已认证
    if (AppData.userData.is_guide_certification === 1) return callback(isLogin);

    isLogin && Router.navigateBack();
    popupModal.value?.show(
      {
        content:
          "你好！这里是全球导游人的家园，为了能给你提供针对性的专业内容服务，需要对你身份进行基础认证，敬请理解！",
        confirmText: "开始认证",
        translateY: "-55%",
      },
      () => {
        Router.navigateTo(
          AppData.userData.status === -1
            ? "/package/guider/pages/apply/type"
            : "/package/guider/pages/apply/detail"
        );
      }
    );
  });
};

const myData = reactive({ isVip: false, isCertificate: false });
const myDataLiveList = ref<number[]>([]);
const myDataLikeList = ref<number[]>([]);
const likeClick = (id: number) => {
  const fn = () => {
    const index = myDataLikeList.value.indexOf(id);
    index === -1
      ? myDataLikeList.value.push(id)
      : myDataLikeList.value.splice(index, 1);
    like_api({ id, type: 1 }).then(() => {
      uni.$emit(EV_NOTE, { type: "like", data: { type: "novice", id } });
    });
  };

  Account.isLogin
    ? fn()
    : Account.login(() => {
        reloadMyData().then(() => {
          // 没有点赞，则点赞
          myDataLikeList.value.includes(id) || fn();
        });
        Router.navigateBack();
      });
};

const reloadMyData = () => {
  return data_api<{ live_course?: number[]; guide_share_like?: number[] }>({
    includes: "live_course,guide_share_like",
  }).then((resp) => {
    myDataLiveList.value = resp.live_course || [];
    myDataLikeList.value = resp.guide_share_like || [];
  });
};
const evLoginCallback = (e: { type: "cancel" }) => {
  console.info(`触发事件：${EV_LOGIN}`, e);
  e.type === "cancel" || reloadMyData();
};
const evOrderCallback = (e: { type: "pay" }) => {
  console.info(`触发事件：${EV_ORDER}`, e);
  e.type === "pay" || reloadMyData();
};
const evNoteCallback = (e: {
  type: "like";
  data: { type: "novice"; id: number };
}) => {
  console.info(`触发事件：${EV_NOTE}`, e);
  if (e.type === "like" && e.data.type === "novice") {
    // 刷新状态
    reloadMyData();
    // 刷新数字
    new_guide_share_info_api({ id: `${e.data.id}` }).then((resp) => {
      const index = listData.value.findIndex((i) => i.id === resp.id);
      listData.value[index].like_count_str = resp.like_count_str;
    });
  }
};

let autoTaskStop: (() => void) | undefined = undefined;
const popupModal = ref<InstanceType<typeof PopupModal>>();
const communityNotePicker = ref<InstanceType<typeof CommunityNotePicker>>();
</script>

<template>
  <NavBack />
  <NavBar title="新手村" />
  <NavBg :retract="pageIsScroll" url="/static/index-bg.png" />
  <NavSpace />

  <view class="index-ad">
    <view class="index-ad-bg"></view>
    <view class="index-ad-swipe" @click="adClick">
      <Swipe v-model="adIndex" :listData="adList" labelKey="img_url" autoplay />
    </view>
    <view class="index-ad-dot">
      <SwipeDot v-model="adIndex" :total="adList.length" />
    </view>
  </view>

  <view class="index-live" v-if="liveList.length > 0">
    <swiper
      class="index-live-swipe"
      circular
      autoplay
      @change="(e) => (liveIndex = e.detail.current)"
    >
      <swiper-item v-for="i of liveList" :key="i.id">
        <view class="index-live-item" @click="liveClick">
          <IndexLiveItem :info="i" />
        </view>
      </swiper-item>
    </swiper>
    <view class="index-live-dot">
      <SwipeDot
        v-model="liveIndex"
        :total="liveList.length"
        color="#ff7900"
        backgroundColor="rgba(255, 121, 0, 0.2)"
      />
    </view>
  </view>

  <view class="index-guide">
    <view class="index-guide-head">
      <IndexMenuTitle :title="guideData.title" />
      <view class="index-guide-desc" v-if="guideData.desc">
        {{ guideData.desc }}
      </view>
    </view>
    <scroll-view
      class="index-guide-wrapper"
      scroll-x
      enhanced
      :show-scrollbar="false"
    >
      <view class="index-guide-space"></view>
      <view
        class="index-guide-item"
        v-for="i of guideList"
        :key="i.id"
        @click="guideClick(i.id)"
      >
        <IndexGuideItem :info="i" />
      </view>
    </scroll-view>
  </view>

  <view class="index-live2" v-if="liveList2.length > 0">
    <image
      class="index-live2-title"
      src="@/package/novice/static/index-live-title.png"
    />
    <view class="index-live2-more" @click="liveClick2(-1)">
      <IndexMoreBtn />
    </view>
    <view class="index-live2-wrapper">
      <view
        class="index-live2-item"
        v-for="(i, d) of liveList2"
        :key="i.id"
        @click="liveClick2(d)"
      >
        <IndexLiveItem2
          :info="i"
          :isPay="i.type === 4 ? myData.isVip : myDataLiveList.includes(i.id)"
        />
      </view>
    </view>
  </view>

  <view class="index-course">
    <view class="index-course-head">
      <IndexMenuTitle :title="courseData.title" />
      <view class="index-course-desc" v-if="courseData.desc">
        {{ courseData.desc }}
      </view>
    </view>
    <view class="index-course-more" @click="courseClick(-1)">
      <IndexMoreBtn />
    </view>
    <view class="index-course-wrapper">
      <view
        class="index-course-item"
        v-for="(i, d) of courseList"
        :key="i.id"
        @click="courseClick(d)"
      >
        <StudyCourseItem :info="i" />
      </view>
    </view>
  </view>

  <view class="index-train" v-if="trainList.length > 0">
    <view class="index-train-head">
      <IndexMenuTitle :title="trainData.title" />
      <view class="index-train-desc" v-if="trainData.desc">
        {{ trainData.desc }}
      </view>
    </view>
    <view class="index-train-more" @click="trainClick('')">
      <IndexMoreBtn text="更多培训" />
    </view>
    <view class="index-train-wrapper">
      <view
        class="index-train-item"
        v-for="i of trainList"
        :key="i.id"
        @click="trainClick(i.id)"
      >
        <IndexTrainItem :info="i" />
      </view>
    </view>
  </view>

  <!-- <image
    class="index-vip"
    :src="vipData.url"
    mode="widthFix"
    @click="vipClick"
  /> -->

  <view class="index-jps">
    <view class="index-jps-head">
      <IndexMenuTitle :title="jpsData.title" />
      <view class="index-jps-desc" v-if="jpsData.desc">
        {{ jpsData.desc }}
      </view>
    </view>
    <view class="index-jps-more" @click="jpsClick('')">
      <IndexMoreBtn />
    </view>
    <view class="index-jps-wrapper">
      <view
        class="index-jps-item"
        v-for="i of jpsList"
        :key="i.id"
        @click="jpsClick(i.id)"
      >
        <IndexJpsItem :info="i" />
      </view>
    </view>
  </view>

  <view class="index-note">
    <view class="index-note-head">
      <IndexMenuTitle :title="noteData.title" />
      <view class="index-note-desc" v-if="noteData.desc">
        {{ noteData.desc }}
      </view>
    </view>
    <view class="index-note-wrapper">
      <view
        class="index-note-column"
        v-for="(i, d) of noteList.columnData"
        :key="d"
        :style="{ width: `${noteList.columnWidth}px` }"
      >
        <view
          class="index-note-item"
          v-for="(j, x) of i"
          :key="j.id"
          @click="noteClick(d, x)"
        >
          <CommunityNoteItem :info="j">
            <view class="index-note-like" @click.stop="likeClick(j.id)">
              <CommunityNoteLike
                :text="j.like_count_str"
                :isLike="myDataLikeList.includes(j.id)"
              />
            </view>
          </CommunityNoteItem>
        </view>
      </view>
    </view>
    <ListMore v-if="listLoadMore" :status="listStatus" />

    <view class="index-note-add" @click="noteClick(-1)">
      <CommunityNoteBtn />
    </view>
  </view>

  <PopupModal ref="popupModal" />
  <CommunityNotePicker ref="communityNotePicker" />
</template>

<style lang="scss">
page {
  padding-top: 40rpx;
  padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
}

.index-ad {
  position: relative;
  margin: 0 40rpx 52rpx;

  .index-ad-bg {
    position: absolute;
    left: 20rpx;
    top: 18rpx;
    right: 20rpx;
    height: 244rpx;
    border-radius: 20rpx;
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20rpx);
  }

  .index-ad-swipe {
    position: relative;
    height: 250rpx;
    border-radius: 20rpx;
    overflow: hidden;
  }

  .index-ad-dot {
    position: absolute;
    right: 30rpx;
    bottom: 20rpx;
  }
}

.index-live {
  position: relative;
  padding-bottom: 28rpx;
  margin-bottom: 40rpx;

  .index-live-swipe {
    height: 212rpx;
    margin: 0 30rpx;
    border-radius: 20rpx;
    overflow: hidden;
  }

  .index-live-dot {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
  }
}

.index-guide {
  margin-bottom: 60rpx;

  .index-guide-head {
    padding-left: 30rpx;
    margin-bottom: 20rpx;
  }

  .index-guide-desc {
    margin-top: 10rpx;
    font-size: 28rpx;
    color: #999999;
    line-height: 40rpx;
  }

  .index-guide-wrapper {
    height: 432rpx;
    white-space: nowrap;
  }

  .index-guide-space,
  .index-guide-item {
    display: inline-block;
    vertical-align: top;
  }

  .index-guide-space {
    width: 30rpx;
  }

  .index-guide-item {
    width: 284rpx;
    margin-top: 20rpx;
    margin-right: 34rpx;
  }
}

.index-live2 {
  position: relative;
  padding-top: 100rpx;
  margin: 0 30rpx 60rpx;
  border-radius: 20rpx;
  background-color: #f0fdf9;

  .index-live2-title {
    position: absolute;
    left: -10rpx;
    top: -20rpx;
    width: 320rpx;
    height: 104rpx;
  }

  .index-live2-more {
    position: absolute;
    top: 30rpx;
    right: 40rpx;
  }

  .index-live2-wrapper {
    padding-bottom: 1rpx;
  }

  .index-live2-item {
    margin: 0 20rpx 20rpx;
  }
}

.index-course {
  position: relative;
  margin-bottom: 40rpx;

  .index-course-head {
    padding-left: 30rpx;
    margin-bottom: 40rpx;
  }

  .index-course-desc {
    margin-top: 10rpx;
    font-size: 28rpx;
    color: #999999;
    line-height: 40rpx;
  }

  .index-course-more {
    position: absolute;
    top: 8rpx;
    right: 30rpx;
  }

  .index-course-wrapper {
    display: flex;
    flex-wrap: wrap;
    padding-left: 30rpx;
    padding-bottom: 1rpx;
  }

  .index-course-item {
    width: 336rpx;
    margin-right: 18rpx;
    margin-bottom: 20rpx;
  }
}

.index-train {
  position: relative;
  padding-bottom: 20rpx;

  .index-train-head {
    padding-left: 30rpx;
    margin-bottom: 40rpx;
  }

  .index-train-desc {
    margin-top: 10rpx;
    font-size: 28rpx;
    color: #999999;
    line-height: 40rpx;
  }

  .index-train-more {
    position: absolute;
    top: 8rpx;
    right: 30rpx;
  }

  .index-train-item {
    margin: 0 30rpx 20rpx;
  }
}

.index-vip {
  display: block;
  width: 692rpx;
  margin: 0 auto 60rpx;
}

.index-jps {
  position: relative;
  margin-bottom: 40rpx;

  .index-jps-head {
    padding-left: 30rpx;
    margin-bottom: 40rpx;
  }

  .index-jps-desc {
    margin-top: 10rpx;
    font-size: 28rpx;
    color: #999999;
    line-height: 40rpx;
  }

  .index-jps-more {
    position: absolute;
    top: 8rpx;
    right: 30rpx;
  }

  .index-jps-wrapper {
    display: flex;
    flex-wrap: wrap;
    padding-left: 30rpx;
    padding-bottom: 1rpx;
  }

  .index-jps-item {
    width: 336rpx;
    margin-right: 18rpx;
    margin-bottom: 20rpx;
  }
}

.index-note {
  .index-note-head {
    padding-left: 30rpx;
    margin-bottom: 50rpx;
  }

  .index-note-desc {
    margin-top: 10rpx;
    font-size: 28rpx;
    color: #999999;
    line-height: 40rpx;
  }

  .index-note-wrapper {
    display: flex;
    justify-content: flex-start;
    padding-left: 30rpx;
    padding-bottom: 1rpx;
  }

  .index-note-column {
    margin-right: 18rpx;
  }

  .index-note-item {
    margin-bottom: 20rpx;
  }

  .index-note-like {
    flex-shrink: 0;
    margin-left: 10rpx;
  }

  .index-note-add {
    position: fixed;
    left: 50%;
    bottom: calc(60rpx + env(safe-area-inset-bottom));
    transform: translateX(-50%);
  }
}
</style>